import {
  Card,
  Row,
  Col,
  Statistic,
  Table,
  Tag,
  Space,
  DatePicker,
  Select,
  Button,
} from "antd"
import { useState, useEffect } from "react"
import {
  UserOutlined,
  TeamOutlined,
  RiseOutlined,
  FallOutlined,
  BarChartOutlined,
} from "@ant-design/icons"
import PageHeaderWrapper from "@/components/pageHeaderWrapper"
import "./index.less"

const { RangePicker } = DatePicker
const { Option } = Select

function CustomerStatistics() {
  const [loading, setLoading] = useState(false)
  const [dateRange, setDateRange] = useState(null)
  const [customerData, setCustomerData] = useState({
    statistics: {
      totalCustomers: 0,
      newCustomers: 0,
      activeCustomers: 0,
      potentialCustomers: 0,
    },
    customerList: [],
  })

  // 获取客户统计数据
  const fetchCustomerData = async () => {
    setLoading(true)
    try {
      // 替换为实际API调用
      const response = await fetch("/api/customer/statistics")
      const data = await response.json()
      setCustomerData(data)
    } catch (error) {
      console.error("获取客户统计数据失败:", error)
    } finally {
      setLoading(false)
    }
  }

  // 表格列定义
  const columns = [
    {
      title: "客户名称",
      dataIndex: "name",
      key: "name",
      render: (text, record) => (
        <Space>
          <UserOutlined />
          <span>{text}</span>
        </Space>
      ),
    },
    {
      title: "客户类型",
      dataIndex: "type",
      key: "type",
      render: (type) => {
        const typeMap = {
          enterprise: { color: "blue", text: "企业客户" },
          individual: { color: "green", text: "个人客户" },
          potential: { color: "orange", text: "潜在客户" },
        }
        const { color, text } = typeMap[type]
        return <Tag color={color}>{text}</Tag>
      },
    },
    {
      title: "联系人",
      dataIndex: "contact",
      key: "contact",
    },
    {
      title: "联系电话",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "客户等级",
      dataIndex: "level",
      key: "level",
      render: (level) => {
        const levelMap = {
          A: { color: "red", text: "A级" },
          B: { color: "orange", text: "B级" },
          C: { color: "green", text: "C级" },
        }
        const { color, text } = levelMap[level]
        return <Tag color={color}>{text}</Tag>
      },
    },
    {
      title: "最近联系时间",
      dataIndex: "lastContact",
      key: "lastContact",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space>
          <Button type="link">查看详情</Button>
          <Button type="link">编辑</Button>
        </Space>
      ),
    },
  ]

  useEffect(() => {
    fetchCustomerData()
  }, [])

  return (
    <>
      <PageHeaderWrapper title="客户统计" subtitle="客户数据分析" />
      <section className="G-main">
        {/* 筛选条件 */}
        <Card style={{ marginBottom: 16 }}>
          <Row gutter={16} align="middle">
            <Col span={6}>
              <RangePicker
                onChange={(dates) => setDateRange(dates)}
                style={{ width: "100%" }}
              />
            </Col>
            <Col span={6}>
              <Select
                placeholder="客户类型"
                style={{ width: "100%" }}
                allowClear
              >
                <Option value="enterprise">企业客户</Option>
                <Option value="individual">个人客户</Option>
                <Option value="potential">潜在客户</Option>
              </Select>
            </Col>
            <Col span={6}>
              <Select
                placeholder="客户等级"
                style={{ width: "100%" }}
                allowClear
              >
                <Option value="A">A级</Option>
                <Option value="B">B级</Option>
                <Option value="C">C级</Option>
              </Select>
            </Col>
            <Col span={6}>
              <Button type="primary" icon={<BarChartOutlined />}>
                导出报表
              </Button>
            </Col>
          </Row>
        </Card>

        {/* 数据概览 */}
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总客户数"
                value={customerData.statistics.totalCustomers}
                prefix={<TeamOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="新增客户"
                value={customerData.statistics.newCustomers}
                prefix={<RiseOutlined />}
                valueStyle={{ color: "#3f8600" }}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="活跃客户"
                value={customerData.statistics.activeCustomers}
                prefix={<UserOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="潜在客户"
                value={customerData.statistics.potentialCustomers}
                prefix={<FallOutlined />}
                valueStyle={{ color: "#cf1322" }}
              />
            </Card>
          </Col>
        </Row>

        {/* 客户列表 */}
        <Card style={{ marginTop: 16 }}>
          <Table
            columns={columns}
            dataSource={customerData.customerList}
            loading={loading}
            rowKey="id"
            pagination={{
              defaultPageSize: 10,
              showTotal: (total) => `共 ${total} 条记录`,
            }}
          />
        </Card>
      </section>
    </>
  )
}

export default CustomerStatistics
